<template>
  <div class="presentStatistics">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">赠送查询统计</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem 1.3rem">
      <div class="filterArea" ref="filterArea">
        <div class="filterItem"><x-button @click.native="showUsersByDepart = true" type="default" v-html="usersByDepartText" :show-loading="loadingStatus" :disabled="loadingStatus" class="inlineBtn popPickerBtn"></x-button></div>
      </div>
      <popup-picker @on-change="changeUsersByDepartText();refreshTable()" :show.sync="showUsersByDepart" :show-cell="false" :data="usersByDepart" :columns="2" v-model="choosenDepartAndUser" ref="usersByDepart" class="btn_popup-picker"></popup-picker>
      <br/>
      <button-tab v-if="loadingStatus">
        <button-tab-item>一般酒水赠送</button-tab-item>
        <button-tab-item>过期酒水赠送</button-tab-item>
      </button-tab>
      <button-tab v-else v-model="type">
        <button-tab-item @on-item-click="refreshTable()">一般酒水赠送</button-tab-item>
        <button-tab-item @on-item-click="refreshTable()">过期酒水赠送</button-tab-item>
      </button-tab>
    </box>
    <x-table :cell-bordered="false">
      <thead>
      <tr style="background-color: #F7F7F7">
        <th>菜品名称</th>
        <th width="22%">赠送数量</th>
        <th width="32%">赠送金额</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in statisticsList" :key="index">
        <td v-text="item.NAME"></td>
        <td v-text="item.QUANTITY"></td>
        <td v-text="'¥ ' + formatCurrency(item.PRICE) + '元'"></td>
      </tr>
      <tr v-if="statisticsList.length <= 0">
        <td colspan="3">
          <div class="listNoItem">暂无赠送</div>
        </td>
      </tr>
      <tr>
        <td>合计：</td>
        <td><span v-text="total"></span> </td>
        <td><span v-text="'¥ ' + formatCurrency(countUp) + '元'"></span> </td>
      </tr>
      </tbody>
    </x-table>
    <br/>
  </div>
</template>

<script>
  import {Box, PopupPicker, XButton, ButtonTab, ButtonTabItem, XTable, numberComma } from 'vux'
  import {getUsersByDepart,getPresentStatistics} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'presentStatistics',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        usersByDepartText:'',
        showUsersByDepart: false,
        choosenDepartAndUser:['allDepart','allPerson'],
        type:0,
        statisticsList:[],
        countUp:0,
        total:0
      }
    },
    components:{
      Box,
      PopupPicker,
      XButton,
      ButtonTab,
      ButtonTabItem,
      XTable
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthorityPresent
      },
      usersByDepart:{
        get(){
          return this.$store.getters.getUsersByDepart_present
        },
        set(value){
          this.$store.commit('updateUsersByDepart_present', value)
        }
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      refreshTable(){
        this.loadingStatus = true
        this.countUp = 0
        this.total = 0
        let reqParams = {
          type:this.type==0?'normal':'expired',
          choosenDepartAndUser:this.choosenDepartAndUser,
          authority:this.authority.view
        }
        getPresentStatistics(reqParams).then((res)=>{
          if(res.status == 'success'){
            this.statisticsList = res.data
            for(let item of this.statisticsList){
              this.countUp = this.countUp + item.PRICE
              this.total = this.total + item.QUANTITY
            }
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getPresentStatistics error info:', res.msg)
          }
          this.loadingStatus = false
        }).catch((err)=>{console.log('getPresentStatistics catch info:',err)})
      },
      changeUsersByDepartText(text){
        this.usersByDepartText = text?(text+'<i class=\'iconfont icon-xiangxia2\'></i>'):(this.$refs.usersByDepart&&this.$refs.usersByDepart.getNameValues().replace(/ /g,' / ')+'<i class=\'iconfont icon-xiangxia2\'></i>')
      }
    },
    mounted(){
      return new Promise((resolve,reject)=>{
        if(this.usersByDepart.length <= 0)
          getUsersByDepart(this.authority.view).then((res)=>{
            if(res.status == 'success'){
              this.usersByDepart = res.data
              //this.$store.commit('updateUsersByDepart_present', res.data)
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getUsersByDepart error info:', res.msg)
            }
            resolve()
          }).catch((err)=>{console.log('getUsersByDepart catch info:',err)})
        else resolve()
      }).then(()=>{
        switch (this.authority.view) {
          case 'self':
            this.choosenDepartAndUser = [this.usersByDepart[0].value,this.usersByDepart[1].value]
            break
          case 'depart':
            this.choosenDepartAndUser = [this.usersByDepart[0].value,'entire_' + this.usersByDepart[0].value]
            break
          default:
            this.choosenDepartAndUser = ['allDepart','allPerson']
        }
        setTimeout(()=>{this.changeUsersByDepartText(this.usersByDepart[0].name + ' / ' + this.usersByDepart[1].name)},200)
        this.refreshTable()
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      })
    }
  }
</script>

<style lang="scss" scoped>
  .presentStatistics{
    .filterArea{
      display: flex;justify-content: space-between;
    }
  }
</style>
